{% extends 'base.html' %}
{% block title %} 详情页 {% endblock %}
{% block mycss %}
    <style>
        .like {
            {#设置鼠标样式#}
            cursor: pointer;
            text-decoration: none;
        }
        .show_com div {
            text-align: right;
        }
        #comments {
            margin-top: 10px;
        }
        .show_com {
            border: 1px solid lightgray;
            border-radius: 20px;
            padding: 10px;
            margin-bottom: 10px;
        }
        .bodys {
            background-color: rgb(255,255,255);
        }
    </style>
{% endblock %}
{% block bodycontent %}
    <div class="container bodys">
        <h3 style="color: pink">{{ article.title }}</h3>
        <p>{{ article.pubdate }}
            &nbsp;&nbsp;&nbsp;
            浏览量：{{ article.looknum }}
            &nbsp;&nbsp;&nbsp;
            <a class="like" aid="{{ article.aid }}">
                <span class="glyphicon glyphicon-thumbs-up" id="love"></span>
                <span class="likes">{{ article.likenum }}</span>
            </a>
        </p>
        <p>
            {{ article.content }}
        </p>

        {#发表评论#}
        <div class="pubcomment">
            <form action="{{ url_for('blog.comment') }}" method="post">

              <div class="form-group">
                <label for="exampleInputcontent">发表内容</label>
                <textarea class="form-control" name="content" cols="30" rows="5"></textarea>
              </div>

             {# 设置隐藏域，传文章id  #}
               <input type="hidden" name="aid" value="{{ article.aid }}">

               <button type="submit" id="resbtn" class="btn btn-success">发表评论</button>
            </form>
        </div>
{#        显示评论#}
        <div id="comments">
            {% if article.comments %}
                {% for com in article.comments %}
                    <div class="show_com">
                        <p><b>发布人：{{ com.user.uname }}</b></p>
                        <p id="nr">{{ com.content }}</p>
                        <div>
                            <span>评论时间：{{ com.comdata }}</span>&nbsp;&nbsp;
                            <a class="give" cid="{{ com.cid }}">
                            {#  点赞量#}
                                {# 赞 的手势字体图标#}
                                <span class="glyphicon glyphicon-thumbs-up" id="love"></span>
                                <span class="gives{{ com.cid }}">{{ com.likenum }}</span>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p style="color: red; font-size: 16px">该文章还没有评论，赶快发表吧！</p>
            {% endif %}
        </div>

    </div>
{% endblock %}

{% block myjs %}
    <script>
        $(function () {
            $('.like').click(function () {
                $.ajax({
                    url:"{{ url_for('blog.love') }}",
                    data:{
                        aid:$(this).attr('aid')
                    },
                    type:'get',
                    success:function (data,status) {
                        if (status == 'success') {
                            {#console.log(data)#}
                            if (data.code == 2000) {
                                $('.likes').text(data.likenum)
                            }
                        }
                    }
                })
            })
            $('.give').click(function () {
                $.ajax({
                    url:"{{ url_for('blog.comprize') }}",
                    data:{
                        cid:$(this).attr('cid')
                    },
                    type:'get',
                    success:function (data,status) {
                        if (status == 'success') {
                            if(data.code == 2000) {
                                var classnum = '.gives' + data.cid
                                $(classnum).text(data.likenum)
                            }
                        }
                    }
                })
            })

        })
    </script>
{% endblock %}